<template>
  <div class="diagnosis-container">
    <h2>确诊界面</h2>

    <!-- 确诊申请列表 -->
    <el-table
      :data="diagnosisApplies"
      border
      style="width: 100%"
      class="diagnosis-table">
      <el-table-column
        prop="patientName"
        label="患者姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="itemName"
        label="检查项目名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="checkResult"
        label="检查结果"
        width="200">
      </el-table-column>
      <el-table-column
        label="确诊结果"
        width="200">
        <template #default="scope">
          <el-input
            v-model="scope.row.diagnosisResult"
            placeholder="请输入确诊结果"
            clearable
            @change="handleDiagnosisResultChange(scope.row)">
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="150">
        <template #default="scope">
          <el-button
            size="small"
            :type="scope.row.confirmed ? 'success' : 'primary'"
            :disabled="!scope.row.diagnosisResult || scope.row.diagnosisResult.trim() === ''"
            @click="toggleConfirm(scope.row)">
            {{ scope.row.confirmed ? '已确诊' : '提交确诊结果' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import service from '@/utils/request'
import { useRouter } from 'vue-router'

const router = useRouter()

// 检查用户是否登录
const checkLogin = () => {
  const token = localStorage.getItem('token')
  const userType = localStorage.getItem('userType')
  
  if (!token || userType !== '3') {
    ElMessage.error('请使用医生账号登录')
    router.push('/login')
    return false
  }
  
  return true
}

// 静态确诊申请数据
const staticDiagnosisApplies = [
  {
    id: 1,
    patientName: '张三',
    itemName: '血常规检查',
    checkResult: '正常',
    confirmed: false,
    diagnosisResult: ''
  },
  {
    id: 2,
    patientName: '张三',
    itemName: '心电图检查',
    checkResult: '正常',
    confirmed: false,
    diagnosisResult: ''
  }
]

const diagnosisApplies = ref([])

// 从本地存储获取已确诊的数据
const getConfirmedDiagnoses = () => {
  const confirmed = localStorage.getItem('confirmedDiagnoses')
  return confirmed ? JSON.parse(confirmed) : []
}

// 初始化确诊申请数据
const initDiagnosisApplies = () => {
  const confirmedDiagnoses = getConfirmedDiagnoses()
  diagnosisApplies.value = staticDiagnosisApplies.map(item => {
    const confirmedItem = confirmedDiagnoses.find(c => c.id === item.id)
    return {
      ...item,
      confirmed: !!confirmedItem,
      diagnosisResult: confirmedItem ? confirmedItem.diagnosisResult : ''
    }
  })
}

// 处理确诊结果变化
const handleDiagnosisResultChange = (row) => {
  // 可以在这里添加结果验证逻辑
  console.log(`确诊ID ${row.id} 的结果已更新: ${row.diagnosisResult}`)
}

// 切换确诊状态
const toggleConfirm = (row) => {
  if (!row.diagnosisResult || row.diagnosisResult.trim() === '') {
    ElMessage.warning('请先填写确诊结果')
    return
  }

  row.confirmed = !row.confirmed
  
  // 更新本地存储
  const confirmedDiagnoses = getConfirmedDiagnoses()
  if (row.confirmed) {
    const existingIndex = confirmedDiagnoses.findIndex(c => c.id === row.id)
    if (existingIndex > -1) {
      confirmedDiagnoses[existingIndex] = { id: row.id, diagnosisResult: row.diagnosisResult }
    } else {
      confirmedDiagnoses.push({ id: row.id, diagnosisResult: row.diagnosisResult })
    }
  } else {
    const index = confirmedDiagnoses.findIndex(c => c.id === row.id)
    if (index > -1) {
      confirmedDiagnoses.splice(index, 1)
    }
  }
  
  localStorage.setItem('confirmedDiagnoses', JSON.stringify(confirmedDiagnoses))
  
  if (row.confirmed) {
    ElMessage.success('确诊结果已提交')
  } else {
    ElMessage.info('已取消确诊状态')
  }
}

// 初始化
onMounted(() => {
  if (checkLogin()) {
    initDiagnosisApplies()
  }
})

</script>

<style scoped>
.diagnosis-container {
  padding: 20px;
}

.diagnosis-table {
  margin-top: 20px;
}
</style>